.wrapper {
  display: table;
  height: 100%; width: 100%;
}

.stage {
  display: table-cell;
  vertical-align: middle;
}

.tabled, .middled {
  text-align: center;
  margin: 0 auto;
}

.thin { font-weight: 300; }
.thick { font-weight: 900; }

a.demo {
  text-transform: uppercase;
  font-size: 36px;
  color: black;
  text-decoration: none;
  position: relative;
  display: block;
}

p.desc {
  font-weight: 100;
  font-size: 80%;
  margin: 1px;
}

[class^="link-"] {
  display: inline-block;
  margin: 2em
}

/* linkone */
.link-1 a.demo:before, .link-1 a.demo:after {
  content: '';
  border-bottom: solid 1px black;
  position: center;
  bottom: 0;
  width: 0;
}

.link-1 a.demo:before { left: 0; }
.link-1 a.demo:after { right: 0; }

.link-1 a.demo:hover:before, .link-1 a.demo:hover:after {
  width: 50%;
}

.link-1 a.demo:before, .link-1 a.demo:after {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}

/* linktwo */
.link-2 a.demo:hover {
  color: #5CAAEF;
}

.link-2 a.demo:before {
  content: '';
  border-bottom: solid 1px #5CAAEF;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  
  opacity: 0;
}

.link-2 a.demo:hover:before {
  opacity: 1.0;
}

.link-2 a, .link-2 a.demo:before {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}

/* linkthree */
.link-3 a.demo:before {
  content: '';
  border-bottom: solid 1px black;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}

.link-3 a.demo:hover:before {
  -webkit-transform: scaleY(4);
     -moz-transform: scaleY(4);
      -ms-transform: scaleY(4);
       -o-transform: scaleY(4);
          transform: scaleY(4);
}

.link-3 a.demo:before {
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
}

/* linkfour */
.link-4 a.demo:before {
  content: '';
  border-bottom: solid 1px black;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}

.link-4 a.demo:hover:before {
  border-bottom: solid thin #5CAAEF;
}

.link-4 a.demo:before {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}

/* linkfive */
.link-5 a.demo:before {
  content: '';
  border-bottom: solid 1px black;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}

.link-5 a.demo:hover:before {
  -webkit-transform: scaleY(4);
     -moz-transform: scaleY(4);
      -ms-transform: scaleY(4);
       -o-transform: scaleY(4);
          transform: scaleY(4);
  border-bottom: solid thin #5CAAEF;
}

.link-5 a.demo:before {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* linksix */
.link-6 a.demo:hover {
  -webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
       -o-transform: scale(1.05);
          transform: scale(1.05);  
}

.link-6 a {
  -webkit-transition: all 0.1s linear;
          transition: all 0.1s linear;
}

/* linkseven */
.link-7 a.demo:before {
  content: '';
  border-bottom: solid 1px #d9534f;
  position: absolute;
  bottom: 0; left: 30%;
  width: 0;
  -webkit-transform: scale(0);
     -moz-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0); 
}

.link-7 a.demo:hover:before {
  border-bottom: solid thin #d9534f;
  width: 40%;
  -webkit-animation: heartbeat-x 1.7s infinite ease-in;
          animation: heartbeat-x 1.7s infinite ease-in;
}

.link-7 a.demo:hover {
  -webkit-animation: heartbeat 1.7s infinite ease-in;
          animation: heartbeat 1.7s infinite ease-in;
}

@-webkit-keyframes heartbeat {
  0% { -webkit-transform: scale(1); }
  10% { -webkit-transform: scale(1.1); }
  20% { -webkit-transform: scale(1); }
  30% { -webkit-transform: scale(1.1); }
  40% { -webkit-transform: scale(1); }
}

@-webkit-keyframes heartbeat-x {
  0% { -webkit-transform: scaleX(0); }
  10% { -webkit-transform: scaleX(1); }
  20% { -webkit-transform: scaleX(0); }
  30% { -webkit-transform: scaleX(1); }
  40% { -webkit-transform: scaleX(0); }
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  10% { transform: scale(1.1); }
  20% { transform: scale(1); }
  30% { transform: scale(1.1); }
  40% { transform: scale(1); }
}

@keyframes heartbeat-x {
  0% { transform: scaleX(0); }
  10% { transform: scaleX(1); }
  20% { transform: scaleX(0); }
  30% { transform: scaleX(1); }
  40% { transform: scaleX(0); }
}